<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        *{padding: 0;margin: 0;}
        a{
            color: inherit;
            text-decoration: none;
        }
        /* #app{}
        [id="app"]{} */

        /* 属性选择器 */
        /* [属性名="属性值"]{

        } */

        /* 如果元素中存在v-cloak 属性 默认隐藏., 等Vue实例准备完毕, 自定删除该属性 */
       
        p {
            height: 40px;
            line-height: 40px;
            border: 1px dashed #333;
        }
        .sub{
            width: 100%;
            height: 200px;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <!-- <div  onclick="alert(hello)">123123</div>
    <div  onclick="alert('hello')">123123</div> -->


    <div id="app">
        <!-- v-show 应用 => 导航切换 -->
        <!-- <p v-on:click="isShow = !isShow">导航</p>
        <div class="sub" v-show="isShow">二级导航</div> -->
       

        <!-- 
            v-if 应用 => 判断用户是否登录 
            1. 如果没有登录  你好,请登录  免费注册
            2. 如果已经登录  你好,xxx  退出
        -->

        <div>
            <button v-on:click="isLogin = !isLogin">isLogin切换</button>
        </div>

        <!--  有问题的版本
        if(!isLogin){}
        if(!isLogin){}
        else{}
        else{}
        -->
        <!-- 
        <a href="" v-if="!isLogin">你好,请登录</a>
        <a href="" v-if="!isLogin">免费注册</a>
        <a href="" v-else>你好,{{nickName}}</a>
        <a href="" v-else>退出</a> -->


        <!-- 通过嵌套父级标签, 由父标签统一控制 对应的a是否显示  (缺点: 多嵌套了一个标签)-->
        <!-- <div class="sign-in" v-if="!isLogin">
            <a href="" >你好,请登录</a>
            <a href="" >免费注册</a>
        </div>
        <div class="sign-user" v-else>
            <a href="">你好,{{nickName}}</a>
            <a href="">退出</a>
        </div> -->

        <!-- 
            条件渲染分组: 如果想同时渲染多个同级元素,又不想包裹无意义的父级标签,就可以使用template标签
                再将虚拟DOM解析为真实DOM过程中, template标签将会被忽略  (v-show无法使用)
        
        -->
        <template class="sign-in" v-show="!isLogin">
            <a href="" >你好,请登录</a>
            <a href="" >免费注册</a>
        </template>
        <template class="sign-user" v-else>
            <a href="">你好,{{nickName}}</a>
            <a href="">退出</a>
        </template>
    </div>
</body>
<script>
    /* 
        Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。


        文本插值  {{ xxx }}    一般用在标签对内, 对象属性名将data中 对应属性名 的 属性值 渲染到标签内 (查询范围应该是当前Vue实例)
            1.文本插值中可以放变量(从data中查找) =>   不同类型的数据,在文本插值中展示的结果可能不一样 
                string number boolean  直接输出
                null undefined 会输出空字符串("")
                array object 会先转化为JSON字符串 (JSON.stringify()) ,再输出 

            2. 文本插值中可以放javascript表达式(算术表达式 关系表达式 逻辑表达式)   => 先求解表达式的结果,再将结果拼接到模板中
            3. 文本插值中可以调用方法  => 先调用方法,在将方法的返回值拼接到模板中
            4. 文本插值中可以进行简单的判断(三目运算符)  => 先判断,再将判断的结果拼接到模板中


           小结:  最终都是将输出的结果,拼接到模板中



        指令: 指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

            a. 指令 (Directives) 是带有 v- 前缀的特殊 attribute(属性 => html属性,写在标签<>以内,作为标签内的属性)
            b. 指令 attribute 的值预期是单个 JavaScript 表达式 (可以是变量 表达式 方法 三目运算符),指令值一般会被""包裹,但是不意味着指令值一定是字符串
            c. 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM (操作DOM => 修改内容 修改属性 修改样式  绑定事件  元素增删改)

        指令的常见用法: 
            v-指令名称        
                部分指令不需要指令值

            v-指令名称 = "指令值"   
                如: v-html  v-text  v-if  v-else  v-else-if  v-show

            v-指令名称:参数 = "指令值"
            v-指令名称:参数.修饰符 = "指令值"

        常见指令:
            v-html="xxx"  设置DOM元素的html结构(标签+文本) (将指令的值作为html结构输出到标签内)
            v-text="xxx"  设置DOM元素的文本结构(只有文本) (将指令的值作为html结构输出到标签内)

            v-pre      禁用文本插值, 此时标签内的{{}} 不会作为文本插值解析,而是作为普通文本输出
            v-cloak    需要配合css属性选择器使用( 等Vue实例准备完毕之前默认隐藏), 等Vue实例准备完毕(声明式渲染)之后在显示
            v-once     只渲染元素和组件一次, 即便后续数据更新, 也不会重新渲染

            v-if  v-else  v-else-if  条件渲染, 用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

            v-show  条件展示, 用于条件性地显示一块内容, 这块内容只会在指令的表达式返回 truthy 值的时候被显示。 (结论: 无论条件是否成立元素都会被渲染到页面中, 只是通过display:none/block; 控制元素是否显示)


            对比v-if和v-show
            1. v-if 是条件渲染 , v-show是条件显示
            2. v-if 也是惰性的：如果在初始渲染时条件为假，就不做任何操作(不渲染), 而v-show否成立元素都会被渲染到页面中  (v-if 对初始页面渲染过程比较友好)
            3. 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
    
    */

    // v-once
    var vm = new Vue({
        el: "#app",
        data: {
            isShow:false,

            isLogin:true,
            nickName:"laowang"
        },
        methods: {
           
        }
    })


</script>

</html>